$table-width: 340px; 
@mixin choose{
	font-size: 12px;
	background-color:#2EA967;
	cursor: pointer;
	border:1px solid #2EA967;
	color:#FFF;
	padding:2px 5px;
	border-radius: 4px;
	&:hover{
		color:#FFF;
		background-color: #2FAF6F;
	}
	&:active,&:visited{
		color:#FFF;
	}
} 

@mixin cancle{
	font-size: 12px;
	background-color:#FFF;
	cursor: pointer;
	border:1px solid #ddd;
	color:#333;
	padding:2px 5px;
	border-radius: 4px;
	&:hover{
		color:#333;
		background-color: #f8f8f8;
	}
	&:active,&:visited{
		color:#333;
	}
}


.channelSelect-mask{
	filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');
	position: fixed;
	z-index:9999998;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
:root .channelSelect-mask {
	filter:none;	 /*处理IE9浏览器中的滤镜效果*/
	background-color:rgba(0,0,0,0.6);
}
.channelSelect-clearFloat{overflow: hidden;}
.channelSelect-ctx *{margin:0;padding:0;font-family: "Microsoft YaHei";font-size: 14px;box-sizing:border-box;}
.channelSelect-ctx{
	color:#333;
	box-sizing:border-box;
	width:800px;
	position: fixed;
	padding:0 10px;
	left:50%;
	margin-left: -400px;
	background-color: #FFF;
	z-index: 9999999;
	a{
		text-decoration: none;
	}
	.channelSelect-title{
		position: relative;
		height: 30px;
		line-height: 30px;
		padding:0 10px;
		border-bottom:1px solid #DDD;
		span{
			cursor: pointer;
			border:1px solid #DDD;
			font-size:12px;
			width:20px;
			height:20px;
			line-height: 20px;
			text-align: center;
			padding:0 2px;
			position: absolute;
			right:10px;
			top:5px;
		}
		p{
			margin:0;padding:0;
			height:30px;
			line-height: 30px;
		}
	}
	.channelSelect-search{
		padding:8px 0;
		input{
			outline: none;
			width:200px;
			padding:0 5px;
			border:1px solid #DDD;
			border-radius:4px;
			height:28px;
			line-height: 28px;
		}
		button{
			outline: none;
			border:0 none;
			height:28px;
			line-height: 26px;
			padding:0 10px;
			border-radius:4px;
			border:1px solid #DDD;
			background-color:#FFF;

		}
	}
	.channelSelect-thead{
		overflow: hidden;
		div{
			float: left;
			background-color: #2EA967;
			text-align: center;
			color:#FFF;
			line-height: 30px;
		}
	}
	.channelNumber{
		width:70px;
	}
	.channelName{
		width:120px;
	}
	.channelMark{
		width:80px;
	}
	.channelOpera{
		width:70px;
	}
	.channelSelect-left{
		width:$table-width;
		float: left;
	}
	.channelSelect-right{
		width:$table-width;
		float:right;
	}
	.channelSelect-clear{
		position: absolute;
		width:90px;
		line-height: 24px;
		border:1px solid #DDD;
		left:50%;
		margin-left: -45px;
		top:50%;
		margin-top: -12px;
		text-align: center;
		border-radius: 4px;
		cursor: pointer;
		-webkit-user-select:none;
		&:hover{
			background-color: #F8F8F8;
		}
	}
	.channelSelect-tbody{
		height:270px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	table{
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0;
		width:100%;
		tr{
			border-bottom: 1px solid #DDD;
			td{
				line-height: 30px;
				padding:0 5px;
				text-align: center;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
		}
	}
	.channelSelect-choose{
		@include choose;
	}
	.channelSelect-cancle{
		@include cancle;
	}
	.channelSelect-dataBox{
		position: relative;
		overflow: hidden;
	}
	.channelSelect-btnGroup{
		padding:20px 10px;
		text-align: right;
		.channelSelect-confirm{
			@include choose;
			width:100px;
			padding:8px 0;
		}
		.channelSelect-close{
			@include cancle;
			width:100px;
			padding:8px 0;
		}
		button{
			display: inline-block;
			margin-left: 30px;
			border:0 none;
		}
	}
}

